<template>
  <div class="recmmendApply">
    <div class="header">
      <h1>申请</h1>
      <p>首页推荐申请</p>
    </div>

    <div class="main">
      <div style="flex: 1; text-align: center">
        <a-form
          ref="formRef"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-item ref="name" label="商品ID" name="proId">
            <a-input
              v-model:value="form.proId"
              disabled=""
              placeholder="请从右侧选择商品"
            />
          </a-form-item>
          <a-form-item label="选择位置" name="postion">
            <a-select
              v-model:value="form.postion"
              placeholder="请选择展示位置"
              show-search
              :default-active-first-option="false"
            >
              <a-select-option
                :value="index"
                v-for="index in 10"
                :key="index"
                >{{ "位置" + index }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="申请理由" name="des">
            <a-textarea
              v-model:value="form.des"
              placeholder="请输入申请理由"
              :auto-size="{ minRows: 5, maxRows: 5 }"
            />
          </a-form-item>
          <a-form-item label=" ">
            <a-space>
              <a-button type="primary" @click="submit()">提交</a-button>
              <a-button @click="reset()">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
        <h1>
          申请记录
          <a-tooltip placement="bottom">
            <template #title>
              <span>点击刷新</span>
            </template>
            <a-button type="primary" shape="circle" @click="getApplyLsit">
              <template #icon><RedoOutlined /></template>
            </a-button>
          </a-tooltip>
        </h1>
        <a-table
          :columns="columns2"
          :data-source="data"
          bordered
          ellipsis
          style="margin-top: 10px"
          :scroll="{ y: 350 }"
          :pagination="false"
          rowKey="recId"
        >
          <template #postion="{ record }">
            {{ "位置" + record.postion }}
          </template>
          <template #state="{ record }">
            <a-tag v-if="record.state == 0" color="orange">待审核</a-tag>
            <a-tag v-if="record.state == 1" color="red">未通过</a-tag>
            <a-tag v-if="record.state == 2" color="green">展示中</a-tag>
            <a-tag v-if="record.state == 3" color="blue">已下架</a-tag>
          </template>
        </a-table>
      </div>

      <div class="product-list">
        <h1>全部商品</h1>
        <ul class="my-scroll">
          <a-empty
            description="您的店铺没有商品"
            style="margin-top: 30%"
            v-if="proList.length == 0"
          />
          <template v-if="true">
            <li
              v-for="item in proList"
              :key="item.proId"
              :class="{ select: item.proId == form.proId }"
              @click="selectPro(item.proId)"
            >
              <div class="proInfo">
                <h2>
                  {{ item.proName
                  }}<span
                    style="margin-left: 5px; color: rgba(0, 0, 0, 0.45)"
                    >{{ "ID:" + item.proId }}</span
                  >
                </h2>
                <h3>{{ item.proTitle }}</h3>
                <div>
                  <span
                    >进价:
                    <i style="color: rgb(207, 19, 34)"
                      >￥{{ item.proCost }}</i
                    ></span
                  ><span
                    >售价:
                    <i style="color: rgb(63, 134, 0)"
                      >￥{{ item.proPrice}}</i
                    ></span
                  >
                </div>
              </div>
              <div class="img">
                <a-image :width="100" :src="item.proIcon"></a-image>
              </div>
              <div class="icon" v-if="item.proId == form.proId">
                <CheckCircleOutlined />
              </div>
            </li>
          </template>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { CheckCircleOutlined, RedoOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import Base64 from "base-64";
const columns2 = [
  {
    title: "商品id",
    dataIndex: "proId",
    key: "proId",
    align: "center",
  },
  {
    title: "申请位置",
    dataIndex: "postion",
    key: "postion",
    align: "center",
    slots: { customRender: "postion" },
  },

  {
    title: "申请时间",
    dataIndex: "applyTime",
    key: "applyTime",
    align: "center",
  },
  {
    title: "当前状态",
    key: "state",
    dataIndex: "state",
    align: "center",
    slots: { customRender: "state" },
  },
  {
    title: "申请理由",
    key: "reason",
    dataIndex: "reason",
    align: "center",
  },
];
const data = [];
export default {
  components: {
    CheckCircleOutlined,
    RedoOutlined,
  },
  data() {
    return {
      data,
      columns2,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        proId: "",
        postion: "",
        des: "",
      },
      rules: {
        proId: [
          {
            required: true,
            message: "请选择商品ID",
            trigger: "change",
          },
        ],
        postion: [
          {
            required: true,
            message: "请选择展示位置",
            trigger: "change",
            type: "number",
          },
        ],
        des: [
          {
            required: true,
            message: "请输入申请理由",
            trigger: "blur",
          },
        ],
      },
      proList: [],
      storeId: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //选择商品
    selectPro(index) {
      this.form.proId = index;
    },
    //获取商品数据
    getData() {
      this.storeId = JSON.parse(
        decodeURIComponent(Base64.decode(sessionStorage.getItem("userInfo")))
      ).storeId;
      this.$axios
        .get("/admin/product/getNoDisCountPro?storeId=" + this.storeId)
        .then((res) => {
          if (res.data.code == 2000) {
            this.proList = res.data.data;
          } else {
          }
        });
      this.getApplyLsit();
    },
    //重置表单
    reset() {
      this.$refs.formRef.resetFields();
    },
    getApplyLsit() {
      this.$axios
        .get("/admin/recommendApply/applyListStore?storeId=" + this.storeId)
        .then((res) => {
          if (res.data.code == 2000) {
            this.data = res.data.data;
            message.success("数据刷新成功");
          } else {
            message.error("数据刷新失败");
          }
        });
    },

    //表单提交
    submit() {
      this.$refs.formRef
        .validate()
        .then(() => {
          this.$axios
            .post("admin/recommendApply/apply", {
              proId: this.form.proId,
              reason: this.form.des,
              postion: this.form.postion,
              storeId: this.storeId,
            })
            .then((res) => {
              if (res.data.code == 2000) {
                message.success("位置" + this.form.postion + "  提交成功");
                this.$refs.formRef.resetFields();
                this.getApplyLsit();
              } else {
                message.error("提交失败");
              }
            });
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
ul {
  list-style: none;
}
.my-scroll {
  height: 100%;
  overflow: hidden auto;
  padding-right: 10px;
}
.my-scroll::-webkit-scrollbar {
  /*滚动条整体样式*/

  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/

  height: 1px;
}

.my-scroll::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  background: #7c7c7c;
}

.my-scroll::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  border-radius: 10px;

  background: #f9f9f9;
}
.recmmendApply .header {
  background-color: #fff;
  padding: 24px;
}
.recmmendApply .header h1 {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
}
.recmmendApply .main {
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  display: flex;
}
.recmmendApply .main .product-list {
  flex: 1;
}
.recmmendApply .main .product-list h1 {
  text-align: center;
}
.my-scroll li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
  cursor: pointer;
  padding-left: 10px;
  position: relative;
  overflow: hidden;
}
.my-scroll li h2,
h3 {
  margin: 0;
  padding: 0;
}
.my-scroll li .icon {
  position: absolute;
  font-size: 72px;
  left: 50%;
  color: #52c41a;
  top: -50px;
  transform: rotate(-32deg);
}
.my-scroll li:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  transform: translate3d(0, 2px, 0);
}
.my-scroll li h2 {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-weight: 500;
}
.my-scroll li h3 {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}
.my-scroll li .proInfo span {
  margin-right: 10px;
}
.my-scroll li .proInfo span i {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
}
.my-scroll .select {
  background-color: #e9e9e9;
}
</style>